<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Page Title -->
    <title>Contact | Spyre - Slick contemporary multipurpose theme</title>

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="../assets/img/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../assets/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/img/favicons/favicon-16x16.png">
    <link rel="manifest" href="../assets/img/favicons/site.webmanifest">
    <link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#f23838">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <!-- Vendor Stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,700%7CRoboto:300,400,700" rel="stylesheet">
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/aos/dist/aos.css" rel="stylesheet">

    <!-- Theme Stylesheets -->
    <link href="https://spyre-theme.bitbucket.io/v1.2.0/dist/css/theme.min.css" rel="stylesheet">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129313359-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-129313359-1');
    </script>
</head>

<body>
<!-- Preloader -->
<div class="preloader">
    <div class="spinner">
        <div class="circles"></div>
    </div>
</div>
<!-- End of Preloader -->


<!-- Header -->
<header class="spyre-navbar navbar navbar-expand-lg bg-secondary navbar-dark fixed-top align-items-center" data-transparent data-text-color="#ffffff">
    <div class="container">
        <a class="navbar-brand mr-lg-5 mr-xl-7" href="index.html">
            <img src="../assets/img/logo.svg" class="d-none d-lg-block" alt="Spyre" width="183" />
            <img src="../assets/img/logo.svg" class="d-block d-lg-none" alt="Spyre" width="150" />
        </a>

        <span class="navbar-text flex-fill d-none d-md-inline-block text-white">
                    Contact us: <a href="#" class="pl-2 text-white">info@spyre.com</a><a href="#" class="pl-5 text-white">+1-202-555-0149</a>
                </span>

        <div class="search d-none d-lg-flex justify-content-end ml-auto mr-2">
            <input class="form-control mr-2" type="text">
            <i class="zmdi zmdi-search"></i>
        </div>

        <div class="menu-toggle">
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="cross">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <!-- Spyrenav Overlay -->
    <div class="spyre-navbar-overlay overlay-slide">
        <div class="container">
            <div class="row">
                <div class="spyre-navbar-nav-container col-md-6 col-lg-5 col-xl-4 bg-white ext-l">
                    <nav class="spyre-navbar-nav">
                        <ul class="spyre-nav">
                            <li class="spyre-nav-item"><a href="index.html" class="spyre-nav-link">Overview</a></li>
                            <li class="spyre-nav-item dropdown">
                                <a href="#" class="spyre-nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li class="dropdown-menu-item"><a href="home.html" class="dropdown-menu-link">Homepage</a></li>
                                    <li class="dropdown-menu-item"><a href="services.html" class="dropdown-menu-link">Services</a></li>
                                    <li class="dropdown-menu-item"><a href="blog.html" class="dropdown-menu-link">Blog</a></li>
                                    <li class="dropdown-menu-item"><a href="blog-single.html" class="dropdown-menu-link">Blog single</a></li>
                                    <li class="dropdown-menu-item"><a href="portfolio.html" class="dropdown-menu-link">Portfolio</a></li>
                                    <li class="dropdown-menu-item"><a href="about.html" class="dropdown-menu-link">About</a></li>
                                    <li class="dropdown-menu-item active"><a href="contact.html" class="dropdown-menu-link">Contact</a></li>
                                    <li class="dropdown-menu-item"><a href="team.html" class="dropdown-menu-link">Team</a></li>
                                    <li class="dropdown-menu-item"><a href="faq.html" class="dropdown-menu-link">Faq</a></li>
                                    <li class="dropdown-menu-item"><a href="pricing.html" class="dropdown-menu-link">Pricing</a></li>
                                    <li class="dropdown-menu-item"><a href="careers.html" class="dropdown-menu-link">Careers</a></li>
                                    <li class="dropdown-menu-item"><a href="careers-single.html" class="dropdown-menu-link">Careers single</a></li>
                                    <li class="dropdown-menu-item"><a href="coming-soon.html" class="dropdown-menu-link">Coming soon</a></li>
                                    <li class="dropdown-menu-item"><a href="404.html" class="dropdown-menu-link">404</a></li>
                                    <li class="dropdown-menu-item"><a href="sign-in.html" class="dropdown-menu-link">Sign In</a></li>
                                    <li class="dropdown-menu-item"><a href="sign-up.html" class="dropdown-menu-link">Sing Up</a></li>
                                    <li class="dropdown-menu-item"><a href="recover-account.html" class="dropdown-menu-link">Recover account</a></li>
                                </ul>
                            </li>
                            <li class="spyre-nav-item"><a href="https://spyre-theme.bitbucket.io/v1.2.0/docs/animations.html" class="spyre-nav-link">Components</a></li>
                            <li class="spyre-nav-item"><a href="../docs/index.html" class="spyre-nav-link">Docs</a></li>
                            <li class="spyre-nav-item"><a href="https://themes.getbootstrap.com/product/spyre-slick-contemporary-multipurpose-theme" target="_blank" class="spyre-nav-link">Purchase</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="col-lg-7 col-xl-8 d-none d-md-block">
                    <div class="d-flex flex-column h-100">
                        <div class="d-flex h-100">
                            <div class="align-self-center">
                                <div class="text-uppercase"
                                     data-background-text="communication"
                                     data-color="#7079a2"
                                     data-opacity="0.02"
                                     data-font-size="85px"
                                     data-font-weight="500"
                                     data-offset-x="-5%"
                                     data-letter-spacing="5px"
                                ></div>
                                <div class="text-uppercase"
                                     data-background-text="planning"
                                     data-color="#7079a2"
                                     data-opacity="0.04"
                                     data-font-size="175px"
                                     data-font-weight="500"
                                     data-offset-x="29%"
                                     data-padding="7vh 0 2vh 0"
                                     data-letter-spacing="5px"
                                ></div>
                                <div class="text-uppercase"
                                     data-background-text="delivering"
                                     data-color="#7079a2"
                                     data-opacity="0.03"
                                     data-font-size="140px"
                                     data-font-weight="500"
                                     data-offset-x="15%"
                                     data-letter-spacing="5px"
                                ></div>
                            </div>
                        </div>

                        <div class="mt-auto">
                            <ul class="nav flex-nowrap float-right">
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-twitter text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-instagram text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-facebook-box text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-pinterest text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-flickr text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-youtube text-white"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Spyrenav Overlay -->
</header>
<!-- End of Header -->


<!-- Main Content -->
<main class="main minh-100vh">
    <!-- Section -->
    <section class="py-0 overflow-hidden text-center">
        <div class="bg-container overlay overlay-40 parallax" data-rellax-percentage="0.5" style="background-image: url(../assets/img/backgrounds/bg-06.jpg)"></div>
        <div class="container">
            <div class="row h-100vh align-items-center">
                <div class="col" data-aos="zoom-out" data-aos-duration="1000">
                    <h1 class="mb-4 text-white text-uppercase fs-4 fs-lg-6">Contact Us</h1>
                    <a href="#section-2" class="btn btn-primary btn-lg px-6" data-smooth-scroll data-smooth-scroll-hash="false">Get in touch</a>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section id="section-2" class="pb-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <h3 class="my-0 fs-1 fw-medium text-primary text-uppercase">Get in touch</h3>
                    <h2 class="mb-5 fw-medium text-secondary text-uppercase">Contact Us</h2>
                    <p class="mb-6 fs--1">Sed eu sapien accumsan, rutrum velit et, imperdiet elit. Vivamus posuere eleifend enim auctor congue. Vivamus sed lacus ex. Phasellus porta metus dui, eget porttitor dolor pharetra in. Fusce consequat convallis tincidunt.</p>
                </div>
            </div>
        </div>
        <div class="container-fluid px-0">
            <div class="row no-gutters">
                <div class="col-md-6">
                    <div class="py-15" data-latlng="40.729884,-73.990988" data-zoom="14" data-marker="../assets/img/marker.png">
                        <div class="infowindow p-2">
                            <h5>Hello</h5>
                            <h6 class="text-primary">SPYRE</h6>
                            <p class="mb-0">Premium Bootstrap Theme</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 bg-blue-light overflow-hidden">
                    <div class="row h-100 align-items-center">
                        <form class="col px-5 px-lg-8 py-6 py-lg-0">
                            <div class="form-group mb-4">
                                <input type="text" class="form-control" id="name" placeholder="Full name">
                            </div>
                            <div class="form-group mb-4">
                                <input type="email" class="form-control" id="email" placeholder="Email address">
                            </div>
                            <div class="form-group mb-4">
                                <textarea class="form-control" rows="8" id="message" placeholder="Message"></textarea>
                            </div>
                            <button type="button" class="btn btn-primary btn-block">Send<i class="zmdi zmdi-mail-send ml-2"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="pb-6">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="row">
                        <div class="col-lg-4 mb-5">
                            <div class="card d-block border-0" data-aos="zoom-in">
                                <img class="card-img-top" src="../assets/img/img-38.jpg" alt="">
                                <div class="card-body p-0 pt-4">
                                    <h6 class="mb-3 text-uppercase">Lorem ipsum dolor sit amet</h6>
                                    <p class="card-text fs--1">Proin venttdio nunc, id fringilla augue luctus et. Mauris condimentum vehicula magna a vehicula. Cras ornare, ligula id semper fringilla, ex turpis.</p>
                                    <a href="#" class="h6 fs--1 fw-bold text-uppercase text-primary float-right">View more<i class="zmdi zmdi-chevron-right pl-4"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 mb-5">
                            <div class="card d-block border-0" data-aos="zoom-in" data-aos-delay="50">
                                <img class="card-img-top" src="../assets/img/img-39.jpg" alt="">
                                <div class="card-body p-0 pt-4">
                                    <h6 class="mb-3 text-uppercase">Etiam pellentesque felis at ligula</h6>
                                    <p class="card-text fs--1">Fusce vel scelerisque ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan velit rhoncus elit tempus ligula id.</p>
                                    <a href="#" class="h6 fs--1 fw-bold text-uppercase text-primary float-right">View more<i class="zmdi zmdi-chevron-right pl-4"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 mb-5">
                            <div class="card d-block border-0" data-aos="zoom-in" data-aos-delay="100">
                                <img class="card-img-top" src="../assets/img/img-40.jpg" alt="">
                                <div class="card-body p-0 pt-4">
                                    <h6 class="mb-3 text-uppercase">Phasellus egestas urna</h6>
                                    <p class="card-text fs--1">Maecenas sagittis elementum lorem ac lobortis. Praesent mauris magna, commodo at libero vitae, auctor feugiat turpis ac nulla.</p>
                                    <a href="#" class="h6 fs--1 fw-bold text-uppercase text-primary float-right">View more<i class="zmdi zmdi-chevron-right pl-4"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="py-8 overflow-hidden text-center">
        <div class="bg-container overlay parallax" data-rellax-percentage="0.5" style="background-image: url(../assets/img/backgrounds/bg-07.jpg);"></div>
        <div class="container-fluid">
            <div class="row align-items-center justify-content-center">
                <div class="col-10 col-lg-5">
                    <h2 class="mb-4 text-white text-uppercase">The office life</h2>
                    <h6 class="mb-5 lh-14 text-white">Donec non tristique nunc. Aliquam quis egestas enim, ac dictum nibh. In vel libero quam. Pellentesque commodo nisl risus, sed sodales orci volutpat at. Mauris ultricies at purus ac blandit. Nunc rhoncus, lacus ut sollicitudin luctus, neque diam tempus arcu.</h6>
                    <a href="#" class="btn btn-lg btn-primary px-6">View more<i class="zmdi zmdi-chevron-right zmdi-hc-lg ml-3"></i></a>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->

    <!-- Section -->
    <section class="text-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-7">
                    <h3 class="my-0 fs-1 fw-medium text-primary text-uppercase">Subscribe</h3>
                    <h2 class="mb-5 fw-medium text-secondary text-uppercase">Newsletter</h2>
                    <p class="mb-4">Cras dapibus erat ex, sed efficitur ligula interdum ut.</p>

                    <form class="form">
                        <div class="form-group mb-1">
                            <div class="row justify-content-center">
                                <div class="col-lg-8">
                                    <input type="text" class="form-control mb-3 mb-lg-2" placeholder="Email address">
                                </div>
                                <div class="col-8 col-lg-4">
                                    <button type="button" class="btn btn-primary btn-block">Subscribe<i class="zmdi zmdi-mail-send ml-2"></i></button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Section -->
</main>
<!-- End of Main Content -->


<!-- Footer -->
<footer class="footer text-white" style="background-image: url(../assets/img/footer-bg.jpg)">
    <div class="container d-flex h-100">
        <div class="row flex-grow-1">
            <div class="col-lg-3 pt-3 ext-l bg-secondary text-center text-lg-left">
                <div class="d-flex flex-column h-100">
                    <div class="pt-5 pt-lg-8 pb-4">
                        <img src="../assets/img/logo-small.svg" alt="" width="92" class="mb-4" />
                        <p class="mb-4 mt-3 fs--1">New York, NY<br />
                            62 Birchpond St.<br />
                            Crystal Lake, NY 11762</p>

                        <p class="fs--1"><a href="#" class="text-white"><i class="zmdi zmdi-phone zmdi-hc-fw mr-1"></i>+1-202-555-0149</a><br />
                            <a href="#" class="text-white"><i class="zmdi zmdi-email zmdi-hc-fw mr-1"></i>info@spyre.com</a></p>
                    </div>

                    <ul class="mt-4 mt-lg-auto mb-5 mb-lg-0 list-unstyled list-inline">
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-twitter text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-instagram text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-facebook-box text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-pinterest text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-flickr text-white"></i>
                            </a>
                        </li>
                        <li class="mr-3 list-inline-item">
                            <a href="#" target="_blank">
                                <i class="zmdi zmdi-youtube text-white"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col d-flex flex-column mb-2 mt-3 pl-lg-7">
                <div class="row pt-5 pt-lg-8 pb-4 pb-lg-6">
                    <div class="col-6 col-lg-3">
                        <h6 class="mb-1 mb-lg-4 text-uppercase">Services</h6>
                        <ul class="pt-2 mb-5 fw-light list-unstyled">
                            <li class="my-1"><a href="#" class="text-white">Design</a></li>
                            <li class="my-1"><a href="#" class="text-white">Development</a></li>
                            <li class="my-1"><a href="#" class="text-white">Themes</a></li>
                            <li class="my-1"><a href="#" class="text-white">CMS</a></li>
                            <li class="my-1"><a href="#" class="text-white">Mobile</a></li>
                        </ul>
                    </div>
                    <div class="col-6 col-lg-3">
                        <h6 class="mb-1 mb-lg-4 text-uppercase">About</h6>
                        <ul class="pt-2 mb-5 fw-light list-unstyled">
                            <li class="my-1"><a href="#" class="text-white">About Us</a></li>
                            <li class="my-1"><a href="#" class="text-white">Contact</a></li>
                            <li class="my-1"><a href="#" class="text-white">The team</a></li>
                            <li class="my-1"><a href="#" class="text-white">Careers</a></li>
                            <li class="my-1"><a href="#" class="text-white">Locate store</a></li>
                        </ul>
                    </div>
                    <div class="col-6 col-lg-3">
                        <h6 class="mb-1 mb-lg-4 text-uppercase">Help</h6>
                        <ul class="pt-2 mb-5 fw-light list-unstyled">
                            <li class="my-1"><a href="#" class="text-white">Sponsors</a></li>
                            <li class="my-1"><a href="#" class="text-white">FAQs</a></li>
                            <li class="my-1"><a href="#" class="text-white">Stories & Ideas</a></li>
                        </ul>
                    </div>
                </div>

                <div class="mt-auto d-flex justify-content-between">
                    <span class="fs--3 fs-lg--2">&copy; Spyre, 2019 Webinning Ltd.</span>
                    <div class="fs--3 fs-lg--2"><a href="#" class="mr-1 text-white">Privacy Policy</a>|<a href="#" class="ml-1 text-white">Cookie Policy</a></div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- End of Footer -->


<!-- Core Javascripts -->
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/popper.js/dist/umd/popper.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Vendor Javascripts -->
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/rellax/rellax.min.js"></script>
<script src="https://spyre-theme.bitbucket.io/v1.2.0/assets/vendor/aos/dist/aos.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBz6oy9q_PqCN73d-TKpvJvwt_RUsjrB-4"></script>

<!-- Theme Javascripts -->
<script src="https://spyre-theme.bitbucket.io/v1.2.0/dist/js/theme.min.js"></script>
</body>
</html>